// WasteWaterFlow.vue
<template>
  <div class="waste-water-card" :style="cardStyle">
    <div class="card-header">
      <div class="title">
        <span class="water-wave"></span>
        废水流量计#{{ data.id }}
      </div>
      <div class="status-led" :style="ledStyle"></div>
    </div>

    <div class="params-grid">
      <!-- 瞬时流量 -->
      <div class="param-item">
        <label>瞬时流量</label>
        <animated-number
          :value="data.instantaneousFlow.value"
          suffix="m³/h"
          :trend="flowTrend"
        />
      </div>

      <!-- 正向累计 -->
      <div class="param-item">
        <label>正向累计流量</label>
        <div class="total-flow">
          <!-- <rolling-number :value="data.forwardTotalInt" /> -->
          <span class="integer">{{ data.forwardTotalInt.value }}</span>
          <span class="decimal">.{{ data.forwardTotalDecimal.value }}</span>
        </div>
      </div>

      <!-- 瞬时流速 -->
      <div class="param-item">
        <label>瞬时流速</label>
        <animated-number
          :value="data.instantaneousVelocity.value"
          suffix="m/s"
        />
      </div>

      <!-- 反向累计... -->
      <div class="param-item">
        <label>反向累计流量</label>
        <div class="total-flow">
          <!-- <rolling-number :value="data.reverseTotalInt" /> -->
          <span class="integer">{{ data.reverseTotalInt.value }}</span>
          <span class="decimal">.{{ data.reverseTotalDecimal.value }}</span>
        </div>
      </div>

      <!-- 流量百分比 -->
      <div class="param-item">
        <label>流量百分比</label>
        <animated-number :value="data.flowPercentage.value" suffix="%" />
      </div>

      <!-- 流量电导比 -->
      <div class="param-item">
        <label>流量电导比</label>
        <animated-number
          :value="data.flowConductanceRatio.value"
          suffix="S/m"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { T_srv, T_cmd, Tsrv, vue, N_flowMonitor } from './config';
import AnimatedNumber from './AnimatedNumber.vue';

@T_srv.comp({ components: { AnimatedNumber } })
export default class WasteWaterFlow extends vue {
  @T_srv.prop({ required: true }) data: N_flowMonitor.wasteWaterInfo;

  get cardStyle() {
    return {
      background: 'linear-gradient(135deg, #2196F3, #1976D2)',
      borderRadius: '8px',
      padding: '16px',
      color: 'white'
    };
  }

  get ledStyle() {
    return { backgroundColor: this.data.online ? '#4CAF50' : '#ff5252' };
  }

  get flowTrend() {
    return this.data.instantaneousFlow.value > this.data.prevFlow
      ? 'up'
      : 'down';
  }
}
</script>

<style scoped>
.waste-water-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.status-led {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: breathing 1s infinite;
}

.params-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.param-item label {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;
}

.total-flow {
  font-family: 'Roboto Mono', monospace;
  font-size: 24px;
}

.decimal {
  font-size: 16px;
  opacity: 0.8;
}
</style>
